<template>
    <div>
        <v-layout
                justify-center
                wrap
        >
            <v-flex>
                <v-card>
                    <v-card-title>
                        <v-spacer></v-spacer>
                        <v-text-field
                                v-model="search"
                                append-icon="fas fa-search"
                                label="Search"
                                single-line
                                hide-details
                        ></v-text-field>
                    </v-card-title>

                    <v-toolbar flat color="white">
                        <v-toolbar-title>有效电报列表</v-toolbar-title>
                        <v-spacer></v-spacer>
                        <v-btn color="primary" dark @click="expand = !expand">
                            {{ expand ? '手动折叠' : '自动折叠' }}
                        </v-btn>
                    </v-toolbar>

                    <v-data-table
                            :headers="headers"
                            :items="writeList"
                            :search="search"
                            :loading="loading"
                            :expand="expand"
                            :hide-actions="hideActions"
                            :disable-initial-sort="true"
                    >
                        <v-progress-linear v-slot:progress color="blue" indeterminate></v-progress-linear>

                        <template v-slot:items="props">
                            <tr @click="props.expanded = !props.expanded">
                                <td class="text-xs-center">
                                    <v-chip
                                            class="ma-2"
                                            color="green darken-1"
                                            label
                                            text-color="white"
                                    >
                                        {{ props.item.id }}
                                    </v-chip>
                                </td>
                                <td class="text-xs-center">{{ props.item.createTime | unixformat }}</td>
                            </tr>
                        </template>

                        <!--扩展内容-->
                        <template v-slot:expand="props">
                            <v-card flat>
                                <v-card-text>
                                    <pre v-html="props.item.content"/>
                                </v-card-text>
                            </v-card>
                        </template>

                        <template v-slot:no-results>
                            <v-alert :value="true" color="error" icon="warning">
                                Your search for "{{ search }}" found no results.
                            </v-alert>
                        </template>

                    </v-data-table>
                    <v-pagination
                            v-model="current"
                            :length="size"
                            :total-visible="7"
                            @input="initWriteList(current,pageSize)"
                            circle
                    >
                    </v-pagination>
                </v-card>
            </v-flex>
        </v-layout>
    </div>
</template>

<script>
    export default {
        name: "writeNormalList",
        data() {
            return {
                writeList: [],
                //表格配置
                expand: false,
                loading: true,
                hideActions: true,
                search: '',
                headers: [
                    {text: '数据ID', align: 'center', value: 'id'},
                    {text: '创建时间', align: 'center', value: 'createTime'},
                ],
                //分页配置
                current: 1,
                pageSize: 10,
                size: 0,
                total: 0,
            }
        },
        methods: {
            /**
             * 加载电报列表
             * */
            initWriteList(current, pageSize) {
                this.$http.post('/api/write/list', this.$qs.stringify({
                    current: current,
                    pageSize: pageSize
                })).then(res => {
                    let resultData = res.data;
                    if (resultData && resultData.code === 200) {
                        let data = resultData.data;
                        this.writeList = [];
                        this.writeList.push(...data.records);
                        this.size = Math.ceil(data.total / this.pageSize)
                    }
                })
            },

        },
        mounted() {
            //初始化列表
            this.initWriteList(this.current, this.pageSize)
        }
    }
</script>
